<!-- 音乐播放底部显示 -->
<script setup>
import {ref,onMounted,defineProps,onUpdated,watch} from "vue"
import axios from "axios"

import play_white from "../../public/video/play_white.svg"
import pause_white from "../../public/video/pause_white.svg"
import leftPoint_white from "../../public/icons/leftPoint_white.svg"
import leftPoint_back from "../../public/icons/leftPoint_back.svg"
import page_point from "../../public/icons/music/page_point.svg"
import music_download from "../../public/icons/music/music_download.svg"

const JiSuanHMS = (time) => {
    let h,m,s
    if(time >= 60 * 60 *60){ // 大于一小时
        //h:m:s
        h = time / 60 / 60^0 //^0:四舍五入整数化
        m = time / 60 % 60^0
        s = time % 60 % 60^0
        return h + ':' + m + ':' + s
    }else { //小于一小时
        //m:s
        m = time / 60 % 60^0
        s = time % 60 % 60^0
        return m + ':' + s
    }
}

let regex = /(.*?)\.(mp3|flac)/;

const musicUrl = ref("")
const music_duration = ref("")
const music_currentTime = ref("")
const music_image_url = ref("")
const isShow = ref(true)

const music_bottom_name = ref("")

//refs
const audioRef = ref(null)
const playerBtnRef = ref(null)
const proessBoxRef = ref(null)
const proessRef = ref(null)
const PointBoxRef = ref(null)
const LeftPointBoxRef = ref(null)
const audioPlayerFuncRef = ref(null)
const music_fm_image_point_box_ref = ref(null)
const music_fm_image_point_ref = ref(null)
const MusicMasterDetailBoxRef = ref(null)

const props = defineProps({
    music_name:{type:String},
    wucha:{type:Number},
})

//监听数据
// watch(()=>props.music_name,(newValue,oldValue) => {
//     musicUrl.value = newValue
//     axios.get(`http://localhost:8091/music_find?file_name=${props.music_name}`).then(async res=>{
//         // console.log(res.data)
//         musicUrl.value = await res.data.url
//         music_image_url.value = await res.data.file_image
//     }).catch(err=>console.log(err))
// })

//组件初始化执行
onMounted(()=>{
    // axios.get(`http://localhost:8091/music_find?file_name=${props.music_name}`).then(async res=>{
    //     // console.log(res.data)
    // }).catch(err=>console.log(err))
})

//组件数据更新后事件执行
onUpdated(()=>{
    if(musicUrl.value != props.music_name){
        axios.get(`http://localhost:8091/music_find?file_name=${props.music_name}`).then(async res=>{
            // console.log(res.data)
            musicUrl.value = await res.data.url
            music_image_url.value = await res.data.file_image
            // music_bottom_name.value = await res.data.file_name
            var match1 = await regex.exec(res.data.file_name);
            // console.log(match1)
            music_bottom_name.value = await match1[1];
            document.title = "音乐 -" + "  " + music_bottom_name.value
        }).catch(err=>console.log(err))
    }
})

//音频即将播放
const music_canplay = (event) => {
    console.log("music currentTime:",event.target.currentTime)
    console.log("music duration:",event.target.duration)
    music_currentTime.value = JiSuanHMS(event.target.currentTime)
    music_duration.value = JiSuanHMS(event.target.duration)
}

//音频播放时事件
const music_timeupdate = (event) => {
    // console.log("music currentTime:",event.target.currentTime)
    // console.log("music duration:",event.target.duration)
    music_currentTime.value = JiSuanHMS(event.target.currentTime)
    proessRef.value.style.width = event.target.currentTime/event.target.duration*100 + '%'
}

//音频播放事件
const music_player = () => {
    if(audioRef.value.paused){
        playerBtnRef.value.src = pause_white
        audioRef.value.play()
    }else{
        playerBtnRef.value.src = play_white
        audioRef.value.pause()
    }
}
//音频播放结束事件
const music_onended = () => {
    playerBtnRef.value.src = play_white
}

//进度条点击事件
const proessMousedown = (event) => {
    console.log(proessBoxRef.value.offsetLeft)
    let len = event.pageX - proessBoxRef.value.offsetLeft - props.wucha
    let percent = len / proessBoxRef.value.offsetWidth;
    // console.log(percent)
    proessRef.value.style.width = percent * (proessBoxRef.value.offsetWidth) - 2 + "px";
    audioRef.value.currentTime = percent * audioRef.value.duration;
}

//播放器显示/隐藏事件
const showAudioBtn = () => {
    if(isShow.value){
        LeftPointBoxRef.value.style.transform = "rotate(90deg)"
        PointBoxRef.value.style.bottom = "0px"
        audioPlayerFuncRef.value.style.bottom = "-100px"
        audioPlayerFuncRef.value.style.opacity = 0

        isShow.value = false
    }else{
        LeftPointBoxRef.value.style.transform = "rotate(270deg)"
        PointBoxRef.value.style.bottom = "100px"
        audioPlayerFuncRef.value.style.bottom = "0px"
        audioPlayerFuncRef.value.style.opacity = 1

        isShow.value = true
    }
}
//图片鼠标移入
const musicImageMouseEnter = () => {
    // console.log('鼠标移入了')
    music_fm_image_point_box_ref.value.style.opacity = 1
    music_fm_image_point_ref.value.style.opacity = 1
}
//图片鼠标移出
const musicImageMouseLeave = () => {
    // console.log('鼠标移出了')
    music_fm_image_point_box_ref.value.style.opacity = 0
    music_fm_image_point_ref.value.style.opacity = 0
}

const isFanZhuan = ref(false)
const showMusicAll = async () => {
    // console.log(isFanZhuan.value)
    if(!isFanZhuan.value){
        music_fm_image_point_ref.value.style.transform = "rotate(0)"

        MusicMasterDetailBoxRef.value.style.transform = "translateY(0)"
        MusicMasterDetailBoxRef.value.style.opacity = 1
        MusicMasterDetailBoxRef.value.style.zIndex = 5
        isFanZhuan.value = true
    }else{
        music_fm_image_point_ref.value.style.transform = "rotate(180deg)"
        MusicMasterDetailBoxRef.value.style.transform = "translateY(100px)"
        MusicMasterDetailBoxRef.value.style.opacity = 0
        MusicMasterDetailBoxRef.value.style.zIndex = -1
        isFanZhuan.value = false
    }
}

const download_music_file_btn = async() => {
    window.location.href = musicUrl.value
}

</script>

<template>
    <div class="audioPlayerFunc" ref="audioPlayerFuncRef" v-if="musicUrl != ''">
        <img :src="pause_white" alt="" @click="music_player" ref="playerBtnRef" class="playerImage"/>
        <img :src="music_image_url" alt="" class="music_fm_image" @mouseenter="musicImageMouseEnter" @mouseleave="musicImageMouseLeave" />
        <div class="music_fm_image_show" ref="music_fm_image_point_box_ref" @mouseenter="musicImageMouseEnter" @mouseleave="musicImageMouseLeave" @click="showMusicAll">
            <img :src="page_point" alt="" ref="music_fm_image_point_ref" class="music_fm_image_show_master"/>
        </div>
        <div class="music_name_box_mini">
            <span>{{music_bottom_name}}</span>
        </div>
        <audio 
        autoplay 
        ref="audioRef" :src="musicUrl" 
        @timeupdate="music_timeupdate" 
        @onended="music_onended"
        @canplay="music_canplay">
            <!-- <source :src="musicUrl" type="audio/mp3">
            <source :src="musicUrl" type="audio/flac"> -->
        </audio>
        <span class="music_time">{{ music_currentTime }}/{{ music_duration }}</span>
        <div class="proessBox" ref="proessBoxRef" @mousedown="proessMousedown">
            <div class="proess" ref="proessRef"></div>
        </div>
    </div>
    <div class="PointBox" ref="PointBoxRef" v-if="musicUrl != ''">
        <img :src="leftPoint_white" alt="" ref="LeftPointBoxRef" @click="showAudioBtn"/>
    </div>
    <div class="MusicMasterDetailBox" ref="MusicMasterDetailBoxRef">
        <div class="leftPoint_back_box">
            <img :src="leftPoint_back" alt="" class="leftPoint_back" @click="showMusicAll"/>
            <img :src="music_image_url" alt="" class="audioMasterImage" />
        </div>
        <div class="music_downlaod_box" @click="download_music_file_btn">
            <img :src="music_download" alt="" />
            <span>{{ "下载音乐" }}</span>
        </div>
    </div>
</template>

<style scoped>
.audioPlayerFunc{
    position: fixed;
    left: 300px;
    bottom: 0;
    width: 1200px;
    height: 100px;
    background-color: rgba(0, 0, 0, .8);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    transition: all 0.3s;
}
.playerImage{
    position: absolute;
    left: 5%;
    top: 30%;
    width: 35px;
    height: 35px;
    cursor: pointer;
    user-select: none;
}
.music_time{
    position: absolute;
    left: 1000px;
    top: 30px;
    color: #fff;
}
.proessBox{
    position: absolute;
    left: 100px;
    top: 80px;
    width: 1000px;
    height: 5px;
    background: rgba(200, 200, 200, .5);
    border-radius: 10px;
}
.proess{
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: skyblue;
    border-radius: 10px;
}
.PointBox{
    position: fixed;
    left: 1400px;
    bottom: 100px;
    width: 60px;
    height: 30px;
    background: rgba(0, 0, 0, .8);
    display: flex;
    align-items: center;
    justify-content: center;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    transition: all 0.3s;
}
.PointBox img{
    width: 70%;
    height: 70%;
    transform: rotate(270deg);
    cursor: pointer;
    user-select: none;
}
.music_fm_image{
    position: absolute;
    left: 120px;
    top: 10px;
    width: 60px;
    height: 60px;
    z-index: 1;
}
.music_fm_image_show{
    position: absolute;
    left: 120px;
    top: 10px;
    width: 60px;
    height: 60px;
    transition: all 0.2s;
    opacity: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .5);
}
.music_fm_image_show_master{
    width: 70%;
    height: 80%;
    transform: rotate(180deg);
    transition: all 0.2s;
    z-index: 3;
}
.music_name_box_mini{
    position: absolute;
    left: 200px;
    top: 30px;
}
.music_name_box_mini span{
    font-size: 17px;
    color: #fff;
}

/* 播放器-音乐详情页面 */
.MusicMasterDetailBox{
    position: absolute;
    left: 300px;
    bottom: 140px;
    width: 1200px;
    height: 750px;
    box-shadow: 2px 2px 2px 2px #000;
    background: #fff;
    z-index: -1;
    opacity: 0;
    border-radius: 10px;
    transform: translateY(100px);
    transition: all 0.5s;
}
.leftPoint_back_box{
    position: absolute;
    left: 20px;
    top: 20px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 1);
}
.leftPoint_back:hover{
    background: rgba(200, 200, 200, .5);
}
.leftPoint_back{
    width: 80%;
    height: 80%;
    transform: rotate(270deg);
    transition: all 0.2s;
    border-radius: 5px;
    cursor: pointer;
}
.audioMasterImage{
    position: absolute;
    left: 50px;
    top: 50px;
    width: 200px;
    height: 200px;
}
/* 音乐下载图标样式 */
.music_downlaod_box{
    position: absolute;
    left: 70px;
    top: 290px;
    width: 195px;
    height: 70px;
    border: 3px solid #000;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    cursor: pointer;
    transition: all 0.2s;
}
.music_downlaod_box:hover{
    border: 3px solid #f00;
    color: #f00;
}
.music_downlaod_box img{
    width: 20%;
    height: 50%;
}
.music_downlaod_box span{
    font-size: 20px;
}
</style>